<script setup>

import {
  getBuildingAll, getBuildingTypeAll,
  addBuliding, getBuildingById, updateBuliding, deleteBuliding
} from '@/api/system/park/building'


export default {
  data() {
    return {
      queryParams: {},
      buildingList: [],
      buildingType: [],
      flagName: "",
      addUpdateBulidingForm: {
        id: "",
        buildingName: '',
        buildingTiernumber: '',
        buildingRoomnumber: '',
        buildingAddress: '',
        buildingType: '',
      },
      addBulidingShowDialogVisible: false,
      rules: {
        buildingName: [
          {required: true, message: '请输入楼栋名称', trigger: 'blur'},
        ], buildingTiernumber: [
          {required: true, message: '请输入楼栋楼栋层数', trigger: 'blur'},
        ], buildingAddress: [
          {required: true, message: '请输入楼栋位置', trigger: 'blur'},
        ], buildingType: [
          {required: true, message: '请输入楼栋类型', trigger: 'blur'},
        ],
      }
    }
  },
  created() {
    this.queryMethods();
    let that = this;
    getBuildingTypeAll().then(function (data) {
      console.log(data)
      that.buildingType = data.data;
    })
  },
  methods: {
    //点击查询
    queryMethods() {
      let that = this;
      getBuildingAll(this.queryParams).then(function (data) {
        that.buildingList = data.data;
      })
    },
    //重置
    resetQuery() {
      this.queryParams = [];
      this.resetForm("queryParams");
      this.queryMethods();
    },
    addBulidingShow() {
      this.addUpdateBulidingForm = {}
      this.addBulidingShowDialogVisible = true;
    },
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.addUpdateBulidingForm.id == "" || this.addUpdateBulidingForm.id == undefined) {
            addBuliding(that.addUpdateBulidingForm).then(function (data) {
              if (data.code == 200) {
                that.$message.success("添加成功");
              } else {
                that.$message.error("添加失败")
              }
              that.addBulidingShowDialogVisible = false;
              that.queryMethods();
            })
          } else {
            updateBuliding(that.addUpdateBulidingForm).then(function (data) {
              if (data.code == 200) {
                that.$message.success("修改成功");
              } else {
                that.$message.error("修改失败")
              }
              that.addBulidingShowDialogVisible = false;
              that.queryMethods();
            })

          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    updateBulidingShow(id) {
      let that = this;
      that.addBulidingShowDialogVisible = true;
      getBuildingById(id).then(function (data) {
        that.addUpdateBulidingForm = data.data;
        that.flagName = that.addUpdateBulidingForm.buildingName;
      });
    },
    deleteBuliding(id) {
      let that = this;
      that.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBuliding(id).then(function (data) {
          if (data.code == 200) {
            that.$message.success("删除成功");
          } else {
            that.$message.error("删除失败")
          }
          that.queryMethods();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    tiaoFloor(id, name) {
      console.log(">>>>>>>>>>> " + name)
      this.$router.push(
        {
          path: '/floor',
          query:
            {"bulidingId": id, "buildingName": name}
        }
      )
    }

  }
}
</script>

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="楼栋名称" prop="username">
        <el-input
          v-model="queryParams.buildingName"
          placeholder="请输入楼栋名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="楼栋类型" prop="status">
        <el-select
          v-model="queryParams.buildingType"
          placeholder="楼栋类型"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option v-for="o in buildingType"
                     :key="o.dictLabel"
                     :label="o.dictLabel"
                     :value="o.dictLabel"

          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryMethods()">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-top:30px;margin-bottom: 30px" icon="el-icon-plus" @click="addBulidingShow">
      添加
    </el-button>
    <div class="parent-flex">
      <div v-for="item in buildingList" style="background-color:#f2f2f2;margin-bottom:20px ;margin-right: 20px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button style="font-size: 20px" type="text" @click="tiaoFloor(item.id,item.buildingName)"> {{
                item.buildingName
              }}
            </el-button>
            <el-tag size="small" style="float: right">
              {{ item.buildingType }}
            </el-tag>
          </div>
          <p>楼栋名称: {{ item.buildingName }}</p>
          <p>楼栋地址: {{ item.buildingAddress }}</p>
          <p>楼栋总层数: {{ item.buildingTiernumber }}</p>
          <p>楼栋总房间数: {{ item.buildingRoomnumber }}</p>
          <p>
            <el-tooltip content="修改">
              <i class="el-icon-edit" style="float: left" @click="updateBulidingShow(item.id)"></i>
            </el-tooltip>
            <el-tooltip content="删除">
              <i class="el-icon-delete" style="float: right" @click="deleteBuliding(item.id)"></i>
            </el-tooltip>
          </p>
        </el-card>
      </div>
    </div>
    <el-dialog
      title="添加楼栋"
      :visible.sync="addBulidingShowDialogVisible"
      width="30%">
      <el-form :inline="true" :model="addUpdateBulidingForm" :rules="rules" ref="addUpdateBulidingForm"
               class="demo-form-inline">
        <el-form-item label="楼栋名称" label-width="110px" prop="buildingName">
          <el-input v-model="addUpdateBulidingForm.buildingName" placeholder="请输入楼栋名称"></el-input>
        </el-form-item>
        <el-form-item label="楼栋层数" label-width="110px">
          <el-input v-if="addUpdateBulidingForm.id==undefined" v-model="addUpdateBulidingForm.buildingTiernumber"
                    placeholder="请输入楼栋层数"></el-input>
          <el-input v-if="addUpdateBulidingForm.id!=undefined"
                    :disabled="true"
                    v-model="addUpdateBulidingForm.buildingTiernumber" placeholder="请输入楼栋层数"></el-input>

        </el-form-item>
        <el-form-item label="楼栋位置" label-width="110px">
          <el-input v-model="addUpdateBulidingForm.buildingAddress" placeholder="请输入楼栋位置"></el-input>
        </el-form-item>
        <el-form-item label="楼栋类型" label-width="110px" prop="buildingType">
          <el-select
            v-model="addUpdateBulidingForm.buildingType"
            placeholder="楼栋类型"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option v-for="o in buildingType"
                       :key="o.dictLabel"
                       :label="o.dictLabel"
                       :value="o.dictLabel"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('addUpdateBulidingForm')">立即创建</el-button>
        <el-button @click="resetForm('addUpdateBulidingForm')">重置</el-button>
        <el-button @click="addBulidingShowDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<style scoped lang="scss">
.parent-flex {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}

.box-card {
  width: 300px;
  height: 280px;
}

</style>
